<template>
  <el-table
    row-key="userId"
    :data="projectMembers">
    <el-table-column
      label="ID"
      prop="userId"
      align="center"
      header-align="center"
    ></el-table-column>
    <el-table-column
      label="昵称"
      prop="userName"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <el-popover trigger="click" @show="getUserInfo(scope.row.userId)" :open-delay="200" :close-delay="50">
          <div slot="reference">
            <el-tag type="success" v-if="isCreator(scope.row.userId)">创建者</el-tag>
            {{ scope.row.userName }}
          </div>
          <UserInfo v-loading="loading.user" :user-info="currentMember"></UserInfo>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <el-popconfirm
          v-if="!isCreator(scope.row.userId)"
          icon="el-icon-info"
          icon-color="red"
          @onConfirm="removeMember(scope.row.userId)"
          title="确认将该用户从团队中移除吗？">
          <el-button slot="reference" v-if="hasPermission" icon="el-icon-delete" size="small" title="移除该成员" type="danger" circle></el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {exitProject, getProjectMembers} from '@/api/project'
import UserInfo from '@/components/UserInfo'
import {getInfo} from '@/api/login'

export default {
  name: 'ProjectMemberList',
  props: {
    projectId: [String, Number]
  },
  components: {
    UserInfo
  },
  data () {
    return {
      projectMembers: undefined,
      currentMember: undefined,
      loading: {
        user: false
      }
    }
  },
  methods: {
    init () {
      getProjectMembers(this.projectId).then(res => {
        this.projectMembers = res.data
        this.$emit('memberCount', this.projectMembers.length)
      }).catch(error => {
        this.$notify.error({
          title: '加载项目成员信息失败',
          message: error.message
        })
      })
    },
    resetData () {
      this.projectMembers = undefined
    },
    isCreator (userId) {
      if (!userId) {
        return false
      }
      return this.$store.getters.currentProjectCreator === userId
    },
    removeMember (currentUserId) {
      exitProject(this.projectId, currentUserId).then(() => {
        this.$notify.success('操作成功')
        this.resetData()
        this.init()
      }).catch(error => {
        this.$notify.error({
          title: '操作失败',
          message: error.message
        })
      })
    },
    getUserInfo (id) {
      this.loading.user = true
      getInfo(id).then(res => {
        this.currentMember = res.data
        this.loading.user = false
      })
    }
  },
  watch: {
    projectId: {
      handler (newVal, oldVal) {
        this.projectId = newVal
        this.resetData()
        this.init()
      },
      deep: true
    }
  },
  mounted () {
    if (this.projectId) {
      this.init()
    }
  },
  computed: {
    hasPermission () {
      console.log(this.$store.getters.currentUserId)
      console.log(this.currentProjectCreator)
      console.log(this.$store.getters.currentUserId === this.currentProjectCreator)
      return this.$store.getters.currentUserId === this.$store.getters.currentProjectCreator
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
